<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Joint JS - Async Rendering</title>
  </head>
  <body>
    <style>
      body, html {
        margin: 0;
        padding: 0;
        --toolbar-margin: 10px;
      }
      #toolbar {
        position: sticky;
        top: var(--toolbar-margin);
        overflow: hidden;
        background: #f9f9f9;
        z-index: 1;
        padding: 4px 8px;
        margin: var(--toolbar-margin);
        border: 1px solid #ccc;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
      }
      #toolbar span {
        display: inline-block;
        margin-right: 10px;
      }
      #toolbar button {
        font-size: 16px;
      }
      #toolbar input {
        margin: 5px;
        font-size: 10px;
      }
      #toolbar input[type="number"] {
        width: 40px;
      }
      #canvas {
        z-index: 0;
        border: 1px solid #333;
        margin: 0 auto;
      }
    </style>

    <div div id="toolbar">
      <span>
        <label for="viewport">Custom viewport</label>
        <input id="viewport" type="checkbox" checked="true"/>
      </span>
      <span>
        <label for="padding">Padding</label>
        <input id="padding" type="checkbox" checked="true"/>
      </span>
      <span>
        <label for="autofreeze">Auto Freeze</label>
        <input id="autofreeze" type="checkbox" checked="true"/>
      </span>
      <span>
        <label for="leave-rendered-in-viewport">Keep rendered in viewport</label>
        <input id="leave-rendered-in-viewport" type="checkbox"/>
      </span>
      <span>
        <label for="leave-dragged-in-viewport">Keep dragged in viewport</label>
        <input id="leave-dragged-in-viewport" type="checkbox"/>
      </span>
      <span>
        <label for="count">Cell count</label>
        <input id="count" type="number" value="1000"/>
      </span>
      <span>
        <label for="column-count">No. of columns</label>
        <input id="column-count" type="number" value="20"/>
      </span>
      <span>
        <label for="batch-size">Batch Size</label>
        <input id="batch-size" type="number" value="1000"/>
      </span>
      <span>
        <button id="restart">Restart</button>
      </span>

    </div>

    <div id="canvas"></div>

    <script src="../../build/joint.js"></script>
    <script src="./async.js"></script>
  </body>
</html>
